<template>
	<view>
		<view class="container">
			<view class="header">
				<view class="headshot">
					<image class="Icon" src="../../static/logo.png" mode=""></image>
				</view>
				<view class="nickMsg">
					<view class="username">
						<text>{{username}}</text>
					</view>
					<view class="toIcon">
						<image class="Icon" src="../../static/logo.png" mode=""></image>
					</view>
					<view class="toUserName">
						<text style="font-size: 34rpx;">{{type}}</text>{{toUserName}}
					</view>
				</view>
				<view class="headshotTo">
					<image class="Icon" src="../../static/logo.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vm from '../../utils/events.js'
	export default {
		data() {
			return {
				username: '张爷爷',
				ID: 'cs12345678',
				checkText: '签',
				type:'子女',
				toUserName:'张强'
				

			};
		},
		props: ['title'],


		created() {
			// this.getTitle();
		},
		methods: {
			check() {
				this.checkText = '√';
				uni.$showMsg('签到成功');
			}
		},
		// getTitle() {
		// 	vm.$on("customEvent", value => {
		// 		this.title = value
		// 	})
		// 	console.log(this.title)
		// }

	}
</script>

<style>
	.container {
		height: 30vh;
		width: 100vw;
		/* background-color: #007AFF; */
	}

	.header {
		height: 30vh;
		width: 100vw;
		z-index: -999;
		background-color: #FFB938;
		display: flex;
	}
	
	.Icon{
		max-width: 100%;
		max-height: 100%;
	}

	.headshot {
		height: 180rpx;
		width: 180rpx;
		/* background-color: #808080; */
		/* background-image: url(../../static/logo.png); */
		overflow: hidden;
		background-size: cover;
		float: left;
		margin-top: 5vh;
		margin-left: 5vw;
		border-radius: 90rpx;
		border: 5rpx solid #ffffff;
	}
	
	.headshotTo{
		height: 180rpx;
		width: 180rpx;
		/* background-color: #808080; */
		/* background-image: url(../../static/logo.png); */
		overflow: hidden;
		background-size: cover;
		float: right;
		margin-top: 5vh;
		margin-right: 5vw;
		border-radius: 90rpx;
		border: 5rpx solid #ffffff;
	}

	.nickMsg {
		display: block;
		justify-content: left;
		width: 35vw;
		height: 180rpx;
		margin-top: 6vh;
		margin-left: 2vw;
		margin-right: 2vw;
		line-height: 60rpx;
	}
	
	.toIcon{
		width: 100%;
		height: 30rpx;
	}

	.check {
		height: 150rpx;
		width: 150rpx;
		text-align: center;
		background-color: #F6681D;
		/* background-image: url(../../static/logo.png); */
		overflow: hidden;
		background-size: cover;
		float: right;
		margin-top: 5vh;
		margin-left: 4vw;
		border-radius: 90rpx;
		/* border: 5rpx solid #ffffff; */
	}

	.check-text {
		width: 100%;
		height: 100%;
		display: block;
		justify-content: center;
		margin-top: 10%;
		/* margin: 0 auto; */
		text-align: center;
		font-size: 80rpx;
		color: #ffffff;
	}

	.username {
		width: 100%;
		font-size: 42rpx;
		font-weight: bold;
		white-space: nowrap;
	}
	
	.toUserName{
		margin-top: 1vh;
		float: right;
		font-size: 42rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.Id {
		font-size: 18rpx;
		white-space: nowrap;
	}

	.title {

		font-size: 48rpx;


	}
</style>
